<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站底部弹出分享组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #007bff;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      
      /* 分享主题 */
      --theme1: #1877F2; /* 社交蓝 */
      --theme2: #E4405F; /* 活力粉 */
      --theme3: #00C853; /* 清新绿 */
      --theme4: #212529; /* 商务黑 */
      --theme5: #FF9800; /* 温暖橙 */
      --theme6: #9C27B0; /* 个性紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      position: relative;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 示例内容区 */
    .demo-content {
      padding: 20px;
    }
    
    .demo-post {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      margin-bottom: 20px;
    }
    
    .post-header {
      padding: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .post-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .post-author {
      font-weight: 600;
      font-size: 15px;
    }
    
    .post-time {
      font-size: 12px;
      color: #666;
    }
    
    .post-content {
      padding: 0 15px 15px;
      font-size: 15px;
      line-height: 1.5;
    }
    
    .post-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .post-actions {
      display: flex;
      padding: 10px 15px;
      border-top: 1px solid #eee;
      gap: 10px;
    }
    
    .post-action {
      flex: 1;
      text-align: center;
      padding: 5px 0;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    .post-action:hover {
      color: var(--primary);
    }
    
    /* 分享弹窗 */
    .share-modal {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--white);
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
      z-index: 1050;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      max-width: 420px;
      margin: 0 auto;
    }
    
    .share-modal.active {
      transform: translateY(0);
    }
    
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    .share-header {
      padding: 18px 20px 15px;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
    
    .share-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-share {
      position: absolute;
      top: 18px;
      right: 20px;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: #666;
    }
    
    .share-body {
      padding: 20px;
    }
    
    .share-options {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
      margin-bottom: 25px;
    }
    
    .share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
      cursor: pointer;
    }
    
    .share-icon-container {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      color: white;
      font-size: 22px;
      transition: transform 0.2s;
    }
    
    .share-option:hover .share-icon-container {
      transform: scale(1.1);
    }
    
    .share-name {
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    
    .share-more {
      text-align: center;
      padding: 12px 0;
      border-top: 1px solid #eee;
    }
    
    .more-btn {
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    /* 主题1：社交蓝 */
    .theme1 .share-modal {
      background-color: #f9fafd;
    }
    
    .theme1 .share-icon-container {
      background-color: rgba(24, 119, 242, 0.1);
      color: var(--theme1);
    }
    
    .theme1 .share-title {
      color: var(--theme1);
    }
    
    /* 主题2：活力粉 */
    .theme2 .share-modal {
      background-color: #fff5f8;
    }
    
    .theme2 .share-icon-container {
      background-color: rgba(228, 64, 95, 0.1);
      color: var(--theme2);
    }
    
    .theme2 .share-title,
    .theme2 .share-option:hover .share-icon-container {
      color: var(--theme2);
    }
    
    /* 主题3：清新绿 */
    .theme3 .share-modal {
      background-color: #f0fff4;
    }
    
    .theme3 .share-icon-container {
      background-color: rgba(0, 200, 83, 0.1);
      color: var(--theme3);
    }
    
    .theme3 .share-title {
      color: var(--theme3);
    }
    
    /* 主题4：商务黑 */
    .theme4 .share-modal {
      background-color: #121212;
      border-top: 1px solid #333;
    }
    
    .theme4 .share-header {
      border-bottom-color: #333;
    }
    
    .theme4 .share-title,
    .theme4 .share-name,
    .theme4 .more-btn,
    .theme4 .close-share {
      color: white;
    }
    
    .theme4 .share-icon-container {
      background-color: #333;
      color: white;
    }
    
    .theme4 .share-more {
      border-top-color: #333;
    }
    
    /* 主题5：温暖橙 */
    .theme5 .share-modal {
      background-color: #fff8e6;
    }
    
    .theme5 .share-icon-container {
      background-color: rgba(255, 152, 0, 0.1);
      color: var(--theme5);
    }
    
    .theme5 .share-title {
      color: var(--theme5);
    }
    
    /* 主题6：个性紫 */
    .theme6 .share-modal {
      background-color: #f3e5f5;
    }
    
    .theme6 .share-icon-container {
      background-color: rgba(156, 39, 176, 0.1);
      color: var(--theme6);
    }
    
    .theme6 .share-title {
      color: var(--theme6);
    }
    
    /* 分享按钮样式 */
    .share-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 16px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .share-btn:hover {
      opacity: 0.9;
    }
    
    .center-btn {
      text-align: center;
      padding: 20px;
    }
    
    /* 动画 */
    @keyframes bounceIn {
      0% { transform: scale(0.8); opacity: 0; }
      70% { transform: scale(1.05); }
      100% { transform: scale(1); opacity: 1; }
    }
    
    .share-option.active .share-icon-container {
      animation: bounceIn 0.3s ease;
    }
    
    /* 响应式 */
    @media (max-width: 360px) {
      .share-option {
        width: 60px;
      }
      
      .share-icon-container {
        width: 45px;
        height: 45px;
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">分享样式</div>
    <div class="switcher-option active" data-style="1">社交蓝</div>
    <div class="switcher-option" data-style="2">活力粉</div>
    <div class="switcher-option" data-style="3">清新绿</div>
    <div class="switcher-option" data-style="4">商务黑</div>
    <div class="switcher-option" data-style="5">温暖橙</div>
    <div class="switcher-option" data-style="6">个性紫</div>
  </div>
  
  <div class="container">
    <div class="demo-content">
      <div class="demo-post">
        <div class="post-header">
          <div class="post-avatar">
            <img src="https://picsum.photos/id/64/200" alt="用户头像">
          </div>
          <div>
            <div class="post-author">旅行爱好者</div>
            <div class="post-time">今天 14:30</div>
          </div>
        </div>
        <div class="post-content">
          分享一组今天拍摄的风景照片，大自然的美景总是让人心情愉悦！#旅行 #风景
        </div>
        <img src="https://picsum.photos/id/10/800/400" alt="帖子图片" class="post-image">
        <div class="post-actions">
          <div class="post-action like-btn">
            <i class="fa fa-heart-o"></i> 点赞
          </div>
          <div class="post-action comment-btn">
            <i class="fa fa-comment-o"></i> 评论
          </div>
          <div class="post-action share-btn">
            <i class="fa fa-share-alt"></i> 分享
          </div>
        </div>
      </div>
      
      <div class="center-btn">
        <button class="share-btn">
          <i class="fa fa-share-alt"></i> 打开分享面板
        </button>
      </div>
    </div>
    
    <!-- 分享弹窗 - 社交蓝 -->
    <div class="share-modal theme1" id="share1">
      <div class="share-header">
        <h3 class="share-title">分享到</h3>
        <button class="close-share">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <div class="share-option" data-platform="wechat">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">微信好友</div>
          </div>
          <div class="share-option" data-platform="moments">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">朋友圈</div>
          </div>
          <div class="share-option" data-platform="qq">
            <div class="share-icon-container">
              <i class="fa fa-qq"></i>
            </div>
            <div class="share-name">QQ好友</div>
          </div>
          <div class="share-option" data-platform="qzone">
            <div class="share-icon-container">
              <i class="fa fa-star-o"></i>
            </div>
            <div class="share-name">QQ空间</div>
          </div>
          <div class="share-option" data-platform="weibo">
            <div class="share-icon-container">
              <i class="fa fa-weibo"></i>
            </div>
            <div class="share-name">微博</div>
          </div>
          <div class="share-option" data-platform="copy">
            <div class="share-icon-container">
              <i class="fa fa-link"></i>
            </div>
            <div class="share-name">复制链接</div>
          </div>
        </div>
        
        <div class="share-more">
          <button class="more-btn">更多分享方式</button>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 - 活力粉 -->
    <div class="share-modal theme2" id="share2">
      <div class="share-header">
        <h3 class="share-title">分享内容</h3>
        <button class="close-share">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <div class="share-option" data-platform="wechat">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">微信</div>
          </div>
          <div class="share-option" data-platform="moments">
            <div class="share-icon-container">
              <i class="fa fa-share-alt"></i>
            </div>
            <div class="share-name">朋友圈</div>
          </div>
          <div class="share-option" data-platform="instagram">
            <div class="share-icon-container">
              <i class="fa fa-instagram"></i>
            </div>
            <div class="share-name">Instagram</div>
          </div>
          <div class="share-option" data-platform="facebook">
            <div class="share-icon-container">
              <i class="fa fa-facebook"></i>
            </div>
            <div class="share-name">Facebook</div>
          </div>
          <div class="share-option" data-platform="twitter">
            <div class="share-icon-container">
              <i class="fa fa-twitter"></i>
            </div>
            <div class="share-name">Twitter</div>
          </div>
          <div class="share-option" data-platform="copy">
            <div class="share-icon-container">
              <i class="fa fa-copy"></i>
            </div>
            <div class="share-name">复制</div>
          </div>
        </div>
        
        <div class="share-more">
          <button class="more-btn">其他方式</button>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 - 清新绿 -->
    <div class="share-modal theme3" id="share3">
      <div class="share-header">
        <h3 class="share-title">分享给好友</h3>
        <button class="close-share">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <div class="share-option" data-platform="wechat">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">微信好友</div>
          </div>
          <div class="share-option" data-platform="moments">
            <div class="share-icon-container">
              <i class="fa fa-paper-plane-o"></i>
            </div>
            <div class="share-name">朋友圈</div>
          </div>
          <div class="share-option" data-platform="qq">
            <div class="share-icon-container">
              <i class="fa fa-qq"></i>
            </div>
            <div class="share-name">QQ</div>
          </div>
          <div class="share-option" data-platform="email">
            <div class="share-icon-container">
              <i class="fa fa-envelope-o"></i>
            </div>
            <div class="share-name">邮件</div>
          </div>
          <div class="share-option" data-platform="sms">
            <div class="share-icon-container">
              <i class="fa fa-mobile"></i>
            </div>
            <div class="share-name">短信</div>
          </div>
          <div class="share-option" data-platform="copy">
            <div class="share-icon-container">
              <i class="fa fa-link"></i>
            </div>
            <div class="share-name">复制链接</div>
          </div>
        </div>
        
        <div class="share-more">
          <button class="more-btn">更多选项</button>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 - 商务黑 -->
    <div class="share-modal theme4" id="share4">
      <div class="share-header">
        <h3 class="share-title">分享</h3>
        <button class="close-share">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <div class="share-option" data-platform="wechat">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">微信</div>
          </div>
          <div class="share-option" data-platform="linkedin">
            <div class="share-icon-container">
              <i class="fa fa-linkedin"></i>
            </div>
            <div class="share-name">LinkedIn</div>
          </div>
          <div class="share-option" data-platform="twitter">
            <div class="share-icon-container">
              <i class="fa fa-twitter"></i>
            </div>
            <div class="share-name">Twitter</div>
          </div>
          <div class="share-option" data-platform="facebook">
            <div class="share-icon-container">
              <i class="fa fa-facebook"></i>
            </div>
            <div class="share-name">Facebook</div>
          </div>
          <div class="share-option" data-platform="email">
            <div class="share-icon-container">
              <i class="fa fa-envelope-o"></i>
            </div>
            <div class="share-name">邮件</div>
          </div>
          <div class="share-option" data-platform="copy">
            <div class="share-icon-container">
              <i class="fa fa-copy"></i>
            </div>
            <div class="share-name">复制</div>
          </div>
        </div>
        
        <div class="share-more">
          <button class="more-btn">更多分享</button>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 - 温暖橙 -->
    <div class="share-modal theme5" id="share5">
      <div class="share-header">
        <h3 class="share-title">分享到</h3>
        <button class="close-share">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <div class="share-option" data-platform="wechat">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">微信好友</div>
          </div>
          <div class="share-option" data-platform="moments">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">朋友圈</div>
          </div>
          <div class="share-option" data-platform="qq">
            <div class="share-icon-container">
              <i class="fa fa-qq"></i>
            </div>
            <div class="share-name">QQ好友</div>
          </div>
          <div class="share-option" data-platform="weibo">
            <div class="share-icon-container">
              <i class="fa fa-weibo"></i>
            </div>
            <div class="share-name">微博</div>
          </div>
          <div class="share-option" data-platform="douban">
            <div class="share-icon-container">
              <i class="fa fa-douban"></i>
            </div>
            <div class="share-name">豆瓣</div>
          </div>
          <div class="share-option" data-platform="copy">
            <div class="share-icon-container">
              <i class="fa fa-link"></i>
            </div>
            <div class="share-name">复制链接</div>
          </div>
        </div>
        
        <div class="share-more">
          <button class="more-btn">更多方式</button>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 - 个性紫 -->
    <div class="share-modal theme6" id="share6">
      <div class="share-header">
        <h3 class="share-title">分享内容</h3>
        <button class="close-share">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <div class="share-option" data-platform="wechat">
            <div class="share-icon-container">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-name">微信</div>
          </div>
          <div class="share-option" data-platform="tiktok">
            <div class="share-icon-container">
              <i class="fa fa-music"></i>
            </div>
            <div class="share-name">抖音</div>
          </div>
          <div class="share-option" data-platform="instagram">
            <div class="share-icon-container">
              <i class="fa fa-instagram"></i>
            </div>
            <div class="share-name">Instagram</div>
          </div>
          <div class="share-option" data-platform="youtube">
            <div class="share-icon-container">
              <i class="fa fa-youtube-play"></i>
            </div>
            <div class="share-name">YouTube</div>
          </div>
          <div class="share-option" data-platform="pinterest">
            <div class="share-icon-container">
              <i class="fa fa-pinterest-p"></i>
            </div>
            <div class="share-name">Pinterest</div>
          </div>
          <div class="share-option" data-platform="copy">
            <div class="share-icon-container">
              <i class="fa fa-copy"></i>
            </div>
            <div class="share-name">复制</div>
          </div>
        </div>
        
        <div class="share-more">
          <button class="more-btn">更多选项</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 遮罩层 -->
  <div class="modal-overlay"></div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = '1';
    let isModalOpen = false;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const shareModals = {
      '1': document.getElementById('share1'),
      '2': document.getElementById('share2'),
      '3': document.getElementById('share3'),
      '4': document.getElementById('share4'),
      '5': document.getElementById('share5'),
      '6': document.getElementById('share6')
    };
    const modalOverlay = document.querySelector('.modal-overlay');
    const shareButtons = document.querySelectorAll('.share-btn');
    const closeButtons = document.querySelectorAll('.close-share');
    const moreButtons = document.querySelectorAll('.more-btn');
    
    // 初始化
    function init() {
      // 显示当前样式的分享弹窗
      showCurrentShareModal();
      
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = this.getAttribute('data-style');
          switchStyle(style);
        });
      });
      
      // 打开分享弹窗
      shareButtons.forEach(btn => {
        btn.addEventListener('click', openShareModal);
      });
      
      // 关闭分享弹窗
      closeButtons.forEach(btn => {
        btn.addEventListener('click', closeShareModal);
      });
      
      // 点击遮罩层关闭
      modalOverlay.addEventListener('click', closeShareModal);
      
      // 更多分享方式
      moreButtons.forEach(btn => {
        btn.addEventListener('click', function() {
          alert('已打开更多分享方式');
        });
      });
      
      // 分享选项点击
      document.querySelectorAll('.share-option').forEach(option => {
        option.addEventListener('click', function() {
          const platform = this.getAttribute('data-platform');
          const name = this.querySelector('.share-name').textContent;
          
          // 添加选中动画
          this.classList.add('active');
          setTimeout(() => this.classList.remove('active'), 500);
          
          // 显示分享成功提示
          setTimeout(() => {
            if (platform === 'copy') {
              alert('链接已复制到剪贴板');
            } else {
              alert(`已分享到${name}`);
            }
            closeShareModal();
          }, 300);
        });
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
      
      // 更新分享弹窗显示
      showCurrentShareModal();
    }
    
    // 显示当前样式的分享弹窗
    function showCurrentShareModal() {
      // 隐藏所有弹窗
      Object.values(shareModals).forEach(modal => {
        modal.classList.remove('active');
      });
      
      // 显示当前样式弹窗
      if (shareModals[currentStyle]) {
        if (isModalOpen) {
          shareModals[currentStyle].classList.add('active');
        }
      }
    }
    
    // 打开分享弹窗
    function openShareModal() {
      isModalOpen = true;
      modalOverlay.classList.add('active');
      showCurrentShareModal();
    }
    
    // 关闭分享弹窗
    function closeShareModal() {
      isModalOpen = false;
      modalOverlay.classList.remove('active');
      Object.values(shareModals).forEach(modal => {
        modal.classList.remove('active');
      });
    }
    
    // 启动
    init();
  </script>
</body>
</html>
